<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会员中心 - {$config.WEB_SITE_TITLE}</title>
    <script src="__PUBLIC__/Home/js/adaptive.js"></script>
    <script src="__PUBLIC__/Home/js/device.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/Home/css/reset.css">
    <link rel="stylesheet" href="__PUBLIC__/Home/css/con-header.css">
    <script src="__PUBLIC__/Home/js/mui.min.js"></script>
    <link href="__PUBLIC__/Home/css/mui.min.css" rel="stylesheet"/>

    <style>
        h4,h5{margin-top: 0px;margin-bottom: 0px;}
        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #666;font-size: 0.24rem;
        }
        html{background: #fff}
        .content{width: 7.5rem;height: auto;margin: 0 auto;margin-top: 0.88rem;}
        .mui-content{background: #fff;padding: 0.3rem;}
        .ziliao{width:100%;height: auto;}
        .ziliao p{width:100%;height: 1rem;line-height: 1rem;font-size: 0.38rem}
        .ziliao p span{float: right;font-size: 0.3rem}
        .ziliao p img{float: left;margin-right: 0.2rem}

         .v-list{width: 100%;height: 1rem;display: flex;justify-content: space-between}
         .v-list li{width: 2rem;height: 1rem;border-radius: 0.2rem;color: #01B0B8;text-align: center;border: 1px solid #01B0B8;line-height: 1rem;font-size: 0.24rem}
         .v-list li b{font-size: 0.34rem;color: #01B0B8}
        .v-show{color: #fff!important;background: #01B0B8}
        .v-show b{color: #fff!important;}
        .content h5{text-align: center;height: 1rem;line-height: 1rem;border-bottom: 1px solid #DEDEDE;color: #333;margin-top: 0.5rem;font-size: 0.36rem}


        /*特权*/
        .tequan{width: 100%;height: auto;margin-top: 0.5rem}
        .tequan li{width: 2.3rem;height: 1.5rem;float: left;text-align: center;line-height: 2.5rem;position: relative;font-size: 0.24rem;color: #666}
        .tequan li img{width: 1rem;height: 1rem;}
    </style>
</head>
<body>
<div class="content">
    <div class="top">
        <h4>会员中心</h4>
        <span class="back"></span>
    </div>

    <div class="mui-content">
         <div class="ziliao">
             <p> <img src="{$user.head_pic}" alt="" style="height: 60px"> {$user.nickname}  <span>未开通</span></p>
         </div>

        <ul class="v-list">
            <li>￥ <b> 100.00</b>/年</li>
            <li>￥ <b> 200.00</b>/季</li>
            <li>￥ <b> 300.00</b>/月</li>
        </ul>

          <h5>专属特权</h5>
        <!--特权-->
        <ul class="tequan">
            <li>
                <img src="__PUBLIC__/Home/img/p-vip1.png" alt="" class="spjz">
                精准匹配广告推荐
            </li>
            <li>
                <img src="__PUBLIC__/Home/img/p-vip1.png" alt="" class="spjz">
                精准匹配广告推荐
            </li>
            <li>
                <img src="__PUBLIC__/Home/img/p-vip1.png" alt="" class="spjz">
                精准匹配广告推荐
            </li>
            <li>
                <img src="__PUBLIC__/Home/img/p-vip1.png" alt="" class="spjz">
                精准匹配广告推荐
            </li>

        </ul>
    </div>

</div>

<script src="__PUBLIC__/Home/js/jquery-1.11.1.js"></script>
<script>
    $(".back").click(function () {
        window.history.back(-1);
    })
$(".v-list li").click(function () {
    $(this).addClass("v-show").siblings().removeClass()
})



</script>
</body>
</html>